<%--
  Created by IntelliJ IDEA.
  User: Adminis
  Date: 2025/3/19
  Time: 11:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路线增加</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/admin/js/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/admin/js/bootstrap.min.js"></script>
    <style>

        .cus-container {
            width: 1368px;
            margin-top: 20px;
        }

        #user-add .modal-content {
            padding: 0 20px 20px;
        }

        #user-edit .modal-content {
            padding: 0 20px 20px;
        }

        .zj, .fh {
            color: rgba(2, 2, 2, 0.53);
            background: rgba(244, 244, 244, 0.54);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.62);
            transition: box-shadow 0.4s ease; /* 添加过渡效果 */
        }

        .zj:hover {
            border: 0;
            text-decoration: none;
            color: rgb(15, 250, 231);
            background: rgba(255, 233, 87, 0.44);
            box-shadow: 0 0 10px rgba(255, 233, 87, 0.63);
        }

        .fh:hover {
            border: 0;
            text-decoration: none;
            color: rgba(123, 255, 87, 0.89);
            background: rgba(250, 133, 15, 0.49);
            box-shadow: 0 0 10px rgba(250, 133, 15, 0.69);
        }


    </style>
</head>
<body>

<div class="container cus-container">
    <!-- 添加用户模态框 -->
    <h3 class="text-center">线路添加</h3>

    <form action="${pageContext.request.contextPath}/route/insertRoute" method="post" enctype="multipart/form-data">
        <%--线路名称--%>
        <div class="form-group">
            <label for="route_name">线路名称:</label>
            <input type="text" class="form-control" name="route_name" id="route_name" placeholder="请输入线路名称"
                   required>
        </div>
        <%--线路名称--%>
        <div class="form-group">
            <label for="route_typeId">线路类型:</label>
            <select name="route_typeId" id="route_typeId" class="form-control" required>
                <option value="">请选择线路类型</option>
                <c:forEach items="${types}" var="type">
                    <option value="${type.type_id}">${type.type_name}</option>
                </c:forEach>
            </select>
        </div>
        <%--线路出发地/目的地--%>
        <div class="form-group row">
            <div class="col-lg-6">
                <label for="route_departure_place">线路出发地:</label>
                <input type="text" class="form-control" name="route_departure_place" id="route_departure_place"
                       placeholder="请输入线路出发地" required>
            </div>
            <div class="col-lg-6">
                <label for="route_destination">线路目的地:</label>
                <input type="text" class="form-control" name="route_destination" id="route_destination"
                       placeholder="请输入线路目的地" required>
            </div>
        </div>
        <%--线路主图--%>
        <div class="form-group">
            <label for="mainImage">插入主图:</label>
            <input type="file" class="form-control" name="mainImage" id="mainImage" required>
        </div>
        <%--线路天数/价钱--%>
        <div class="form-group row">
            <div class="col-lg-6">
                <label for="route_day">线路天数:</label>
                <input type="number" class="form-control" name="route_day" id="route_day" placeholder="请输入线路天数"
                       required>
            </div>
            <div class="col-lg-6">
                <label for="route_price">线路价钱:</label>
                <input type="text" class="form-control" name="route_price" id="route_price" placeholder="请输入路价钱"
                       required>
            </div>
        </div>
        <%--是否主题/选择主题--%>
        <div class="form-group row">
            <div class="col-lg-6">
                <label for="route_is_theme">是否主题:</label>
                <select name="route_is_theme" id="route_is_theme" class="form-control" onchange="isTheme(this.value)"
                        required>
                    <option value="">请选择是否主题</option>
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>
            <div class="col-lg-6">
                <label for="route_themeId">主题:</label>
                <select name="route_themeId" id="route_themeId" class="form-control" disabled required>
                    <option id="moren" value="">请选择主题</option>
                    <c:forEach items="${themes}" var="theme">
                        <option value="${theme.theme_id}">${theme.theme_name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <%--供应商--%>
        <c:if test="${aclUser.supplier.supplier_id == 0}">
            <div class="form-group">
                <label for="route_supplierId">供应商:</label>
                <select name="route_supplierId" id="route_supplierId" class="form-control" required>
                    <option value=""> -请选择- </option>
                    <c:forEach items="${suppliers}" var="supplier">
                        <option value="${supplier.supplier_id}">${supplier.supplier_name}</option>
                    </c:forEach>
                </select>
            </div>
        </c:if>
        <c:if test="${aclUser.supplier.supplier_id != 0}">
            <div class="form-group">
                <label for="route_supplierId">供应商:</label>
                <select name="route_supplierId" id="route_supplierId" class="form-control">
                    <option value="${aclUser.supplier.supplier_id}">${aclUser.supplier.supplier_name}</option>
                </select>
            </div>
        </c:if>



        <%--是否轮播--%>
        <div class="form-group">
            <label for="route_is_slideshow">是否轮播:</label>
            <select name="routh_is_slideshow" id="route_is_slideshow" class="form-control"
                    onchange="isSlideshow(this.value)" required>
                <option value="">请选择是否轮播</option>
                <option value="1">是</option>
                <option value="0">否</option>
            </select>
        </div>
        <%--插入轮播--%>
        <div class="form-group">
            <label for="slideshow_url">插入轮播:</label>
            <input type="file" class="form-control" name="image" id="slideshow_url" disabled required>
        </div>
        <%--轮播顺序--%>
        <div class="form-group">
            <label for="slideshow_order">轮播顺序:</label>
            <input type="number" class="form-control" name="slideshow_order" id="slideshow_order" disabled required>
        </div>
        <%--线路描述--%>
        <div class="form-group">
            <label for="route_content">线路描述:</label>
            <textarea class="form-control" name="route_content" id="route_content" rows="3"
                      placeholder="请输入线路描述" required></textarea>
        </div>

        <button type="submit" class="btn btn-primary btn-lg btn-block zj">增加</button>
        <a href="${pageContext.request.contextPath}/route/selectRoute"
           class="btn btn-primary btn-lg btn-block fh">返回</a>
    </form>
</div>

</body>
</html>
<script>
    function isTheme(object) {
        console.log(object)
        let dis = "1";
        if (dis == object) {
            //取消禁用
            document.getElementById("route_themeId").disabled = false;
        } else {
            //禁用
            document.getElementById("moren").selected = true;
            document.getElementById("route_themeId").disabled = true;
        }
    }

    function isSlideshow(object) {
        console.log(object)
        let dis = "1";
        if (dis == object) {
            //取消禁用
            document.getElementById("slideshow_url").disabled = false;
            document.getElementById("slideshow_order").disabled = false;
        } else {
            //禁用
            document.getElementById("slideshow_url").disabled = true;
            document.getElementById("slideshow_order").disabled = true;
            document.getElementById("slideshow_order").value = "";
        }
    }


</script>